<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/page/layout/layout.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

	<h:outputStylesheet>
a.no-decor>img {
    border: none;
}
</h:outputStylesheet>

	<ui:define name="title">Seleccionar operacion</ui:define>

	<ui:define name="content">

		<a4j:commandLink styleClass="no-decor" render="editGrid"
			execute="@this" oncomplete="#{rich:component('editPane')}.show()">
			<h:graphicImage library="img/icons" name="edit.gif" alt="alta" />
			<h:outputText value="Nueva operacion" />
			<a4j:param value="#{it.index}"
				assignTo="#{listOperacionView.currentIndex}" />
			<f:setPropertyActionListener target="#{listOperacionView.edited}"
				value="#{listOperacionView.new}" />
		</a4j:commandLink>
		<br />
		<a4j:status onstart="#{rich:component('statPane')}.show()"
			onstop="#{rich:component('statPane')}.hide()" />
		<h:form id="form">
			<rich:dataTable value="#{listOperacionView.all}" var="operacion"
				iterationStatusVar="it" id="table" rows="15">
				<rich:column>
					<f:facet name="header">#</f:facet>
                #{it.index}
            </rich:column>
				<rich:column>
					<f:facet name="header">Id Operacion</f:facet>
					<h:outputText value="#{operacion.operacionId}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Buque</f:facet>
					<h:outputText value="#{operacion.buque.buqueNombre}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Cliente</f:facet>
					<h:outputText value="#{operacion.cliente.clienteNombre}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Agencia Nacional</f:facet>
					<h:outputText
						value="#{operacion.agenciaNacional.agenciaNacionalNombre}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Tipo Operacion</f:facet>
					<h:outputText value="#{operacion.operacionTipo}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Import/Export</f:facet>
					<h:outputText value="#{operacion.operacionExportacionImportacion}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Estadia</f:facet>
					<h:outputText value="#{operacion.operacionTiempoEstadia}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Fecha</f:facet>
					<h:outputText value="#{operacion.operacionFecha}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Costo</f:facet>
					<h:outputText value="#{operacion.operacionCostoTotal}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Observaciones</f:facet>
					<h:outputText value="#{operacion.operacionObservaciones}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Carga/Descarga</f:facet>
					<h:outputText value="#{operacion.operacionCargaDescarga}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Origen</f:facet>
					<h:outputText value="#{operacion.operacionOrigen}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Destino</f:facet>
					<h:outputText value="#{operacion.operacionDestino}" />
				</rich:column>
				<!-- TODO: faltan datos compuestos, mapas, etc!!-->
				<rich:column>
					<f:facet name="header">Accion</f:facet>
					<a4j:commandLink styleClass="no-decor" render="editGrid"
						execute="@this" oncomplete="#{rich:component('editPane')}.show()">
						<h:graphicImage library="img/icons" name="edit.gif" alt="edit" />
						<a4j:param value="#{it.index}"
							assignTo="#{listOperacionView.currentIndex}" />
						<f:setPropertyActionListener target="#{listOperacionView.edited}"
							value="#{operacion}" />
					</a4j:commandLink>
					<a4j:commandLink styleClass="no-decor" execute="@this"
						render="@none"
						oncomplete="#{rich:component('confirmPane')}.show()">
						<h:graphicImage library="img/icons" name="delete.gif" alt="delete" />
						<a4j:param value="#{operacion}"
							assignTo="#{listOperacionView.deleted}" />
					</a4j:commandLink>
				</rich:column>
				<f:facet name="footer">
					<rich:dataScroller page="#{listOperacionView.page}" />
				</f:facet>
			</rich:dataTable>

			<a4j:jsFunction name="remove" action="#{listOperacionView.remove}"
				render="table" execute="@this"
				oncomplete="#{rich:component('confirmPane')}.hide();" />

			<rich:popupPanel id="statPane" autosized="true">
				<h:graphicImage library="img" name="ai.gif" alt="ai" />
        Por favor espere...
    </rich:popupPanel>

			<rich:popupPanel id="confirmSelectPane" autosized="true">
        Ha seleccionado esta operacion para trabajar.
				<a4j:commandButton value="Ok" onclick="return true;" />
			</rich:popupPanel>

			<rich:popupPanel id="confirmPane" autosized="true">
        Esta seguro que desea eliminar esta fila?
        <a4j:commandButton value="Cancelar"
					onclick="#{rich:component('confirmPane')}.hide(); return false;" />
				<a4j:commandButton value="Borrar" onclick="remove(); return false;" />
			</rich:popupPanel>

			<rich:popupPanel header="Operacion" id="editPane"
				domElementAttachment="parent" autosized="true">
				<h:panelGrid columns="3" id="editGrid">
					<h:outputText value="Cliente" />
					<rich:select id="cliente"
						value="#{addOperacionView.edited.cliente}"
						enableManualInput="true" defaultLabel="nombre del cliente"
						required="true">
						<f:selectItems value="#{inplaceSelectClienteBean.clientesOptions}" />
					</rich:select>
					<h:panelGroup />
					<h:outputText value="Buque" />
					<rich:select id="buque" value="#{addOperacionView.edited.buque}"
						enableManualInput="true" defaultLabel="nombre del buque"
						required="true">
						<f:selectItems value="#{inplaceSelectBuqueBean.buquesOptions}" />
					</rich:select>
					<h:panelGroup />
					<h:outputText value="Agencias" />
					<rich:select id="agenciaNacional"
						value="#{addOperacionView.edited.agenciaNacional}"
						enableManualInput="true" defaultLabel="nombre de la agencia"
						required="true">
						<f:selectItems value="#{inplaceSelectAgenciaBean.agenciasOptions}" />
					</rich:select>
					<h:panelGroup />
					<h:outputText value="Tipo operacion" />
					<h:inputText label="Tipo operacion" id="operacionTipo"
						value="#{listOperacionView.edited.operacionTipo}" size="60"
						required="false" />
					<h:panelGroup />
					<h:outputText value="Import/Export" />
					<h:inputText label="Import/Export"
						id="operacionExportacionImportacion"
						value="#{listOperacionView.edited.operacionExportacionImportacion}"
						size="60" required="false" />
					<h:panelGroup />
					<h:outputText value="Dias Estadia" />
					<rich:inputNumberSpinner id="operacionTiempoEstadia"
						value="#{listOperacionView.edited.operacionTiempoEstadia}"
						step="1" />
					<h:panelGroup />
					<h:outputText value="Fecha de la operacion" />
					<rich:calendar id="operacionFecha" mode="ajax"
						boundaryDatesMode="scroll"
						value="#{listOperacionView.edited.operacionFecha}" />
					<h:panelGroup />
					<h:outputText value="Carga/Descarga" />
					<h:inputText label="Carga/Descarga" id="operacionCargaDescarga"
						value="#{listOperacionView.edited.operacionCargaDescarga}"
						size="60" required="false" />
					<h:panelGroup />
					<h:outputText value="Origen" />
					<h:inputText label="operacionOrigen" id="operacionOrigen"
						value="#{listOperacionView.edited.operacionOrigen}" size="60"
						required="false" />
					<h:panelGroup />
					<h:outputText value="Destino" />
					<h:inputText label="Destino" id="operacionDestino"
						value="#{listOperacionView.edited.operacionDestino}" size="60"
						required="false" />
					<h:panelGroup />
					<h:outputText value="Costo Total" />
					<h:inputText label="operacionCostoTotal" id="operacionCostoTotal"
						value="#{listOperacionView.edited.operacionCostoTotal}" size="60"
						required="false" />
					<h:panelGroup />
					<h:outputText value="Observaciones" />
					<h:inputTextarea label="operacionObservaciones"
						id="operacionObservaciones"
						value="#{listOperacionView.edited.operacionObservaciones}"
						size="100" required="false" />
					<h:panelGroup />
				</h:panelGrid>
				<a4j:commandButton value="Guardar"
					action="#{listOperacionView.store}" render="table"
					execute="editPane"
					oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('editPane')}.hide();}" />
				<a4j:commandButton value="Cancelar"
					onclick="#{rich:component('editPane')}.hide(); return false;" />
			</rich:popupPanel>

		</h:form>

	</ui:define>
</ui:composition>
